<template>
	<view class="lease">
		<!-- #ifdef MP-WEIXIN -->
		<view class="head" :style="{height: pHeight + tHeight + 'px'}">
			<view class="xztitle" :style="[{height: pHeight + 'px', top: tHeight + 'px',lineHeight: pHeight + 'px'}]">
			</view>
		</view>
		<view class="headtop" :style="{marginTop: pHeight + tHeight + 'px'}">
			<view class="nr">
				<view class="title">推出成功</view>
				<view class="desc">请取走充电宝</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY -->
		<view class="headtop">
			<view class="nr">
				<view class="title">推出成功</view>
				<view class="desc">请取走充电宝</view>
			</view>
		</view>
		<!-- #endif -->
		<view class="banner">
			<image :src="baseUrl + '/wximage/lease_success.png'"></image>
		</view>
		<view class="foot">
			<view class="daojishi">{{times}}s</view>
			<view class="desc">请及时取走充电宝</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				headerTop: 0,
				pHeight: 0,
				tHeight: 0,
				times: 3,
				timer: null,
				order_danhao: '',
				order_id: '',
			}
		},
		onLoad(options) {
			// 头部距离
			let res = uni.getSystemInfoSync() ///微信api方法
			let titleH;
			if (res && res['system']) {
				// 判断是否是安卓操作系统 （标题栏苹果为44px,安卓为48px）
				if (res['system'].indexOf('Android') > 0) {
					titleH = 48
				} else {
					titleH = 46
				}
				this.headerTop = titleH + res['statusBarHeight']
				this.pHeight = titleH
				this.tHeight = res['statusBarHeight']
			}
			
			this.order_danhao = options.order_danhao;//单号
			let that = this;
			this.request({
				url: '/xcx/orderDetail',
				data: {
					danhao: this.order_danhao,
					agent_id: '',
					role_id: '',
				},
				method: "POST"
			}).then(res => {
				if (res.data.code == 200) {
					this.order_id = res.data.data.id;
					that.getTime();
				} else {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none'
					})
				}
			})
		},
		methods:{
			getTime(){
				let that = this;
				let timer = setInterval(function(){
					that.times = parseInt(that.times) - 1;
					if(that.times == 1){
						uni.redirectTo({
							url: '/pages/order/indetail?id=' + that.order_id
						})
						clearInterval(timer);
					}
				},1000)
			},
			fanhui() {
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.lease {
		width: 100%;
		margin: 0 auto;
		
		// #ifdef MP-ALIPAY
		height: 100vh;
		overflow-y: scroll;
		//#endif
	
		.head {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
	
			.xztitle {
				position: fixed;
				left: 0%;
				top: 0;
				width: 100%;
				text-align: center;
				color: #333333;
				font-size: 32rpx;
			}
			
			.iconfont {
				position: absolute;
				top: 0;
				left: 14rpx;
				font-size: 44rpx;
			}
		}
		
		.headtop {
			width: 100%;
			
			image{
				width: 100%;
				height: 100vh;
				display: flex;
			}
			
			.nr{
				margin-left: 60rpx;
				margin-top: 200rpx;
				
				.title{
					font-size: 48rpx;
					color: #333333;
					font-weight: 700;
					margin-bottom: 10rpx;
				}
				
				.desc{
					font-size: 48rpx;
					color: #333333;
					font-weight: 700;
				}
			}
		}
		
		.banner{
			width: 100%;
			margin: 0 auto;
			margin-top: 240rpx;
			text-align: center;
			
			image{
				width: 380rpx;
				height: 374rpx;
			}
		}
		
		.foot{
			width: 100%;
			margin: 0 auto;
			margin-top: 280rpx;
			text-align: center;
			
			.daojishi{
				font-size: 28rpx;
				color: #1DE9DC;
				margin-bottom: 20rpx;
			}
			
			.desc{
				font-size: 28rpx;
				color: #999999;
			}
		}
	}
</style>